import { Button, DatePicker, Flex, Form, Pagination, Select, Table } from "antd";
import style from '../css/Archivedetails.module.scss'
import { PrinterOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
import { TableProps } from "antd/lib";
import { exportDataToExcel } from '../components/exportToExcel'
import { exportTableToPdf } from '../components/exportToPdf'
import { useRef } from "react";

function Archivedetails() {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    // 状态选择
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    // 表格数据
    interface DataType {
        key: string;
        Medicalrecord: string;
        Medicalcard: string;
        name: string;
        sex: string;
        IDtype: string;
        IDcard: string;
        status: string;
        time: string
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '病历号',
            dataIndex: 'Medicalrecord',
            key: 'Medicalrecord',
            width: '131px'
        },
        {
            title: '就诊卡号',
            dataIndex: 'Medicalcard',
            key: 'Medicalcard',
            width: '132px'
        },
        {
            title: '患者姓名',
            dataIndex: 'name',
            key: 'name',
            width: '122px'
        },
        {
            title: '性别',
            key: 'sex',
            dataIndex: 'sex',
            width: '97px'
        },
        {
            title: '证件类型',
            key: 'IDtype',
            dataIndex: 'IDtype',
            width: '122px'
        },
        {
            title: '证件号',
            key: 'IDcard',
            dataIndex: 'IDcard',
            width: '199px',

        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            width: '104px',
            render: (text) => (
                text == '正常' ?
                    <p style={{ color: '#00A76F' }}>{text}</p>
                    :
                    <p style={{ color: '#aaa' }}>{text}</p>
            )
        },
        {
            title: '登记时间',
            key: 'time',
            dataIndex: 'time',
            width: '196px'
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '2',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '3',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '4',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '5',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '6',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '7',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '8',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '9',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '10',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '正常',
            time: '2024-01-06  09:20:30'
        },
        {
            key: '11',
            Medicalrecord: '6520050869',
            Medicalcard: '20050869',
            name: '张晓晓',
            sex: '女',
            IDtype: '居民身份证',
            IDcard: '5301************66',
            status: '已注销',
            time: '2024-01-06  09:20:30'
        },
    ];
    // 搜索
    const search=()=>{
        console.log('搜索')
        form.validateFields().then(values => {
            console.log('Validated form values:', values);
        }).catch(errorInfo => {
            console.log('Validate Failed:', errorInfo);
        });
    }
    // 打印
    const tableRef = useRef<HTMLDivElement>(null);
    const print= async ()=>{
        console.log('打印')
        if (tableRef.current) {
            await exportTableToPdf(tableRef.current, 'table_data.pdf');
        }
    }
    // 导出
    const exports=()=>{
        console.log('导出')
        exportDataToExcel(data,'Archivedetails.xlsx')
    }
    return (
        <>
            <Form
                form={form}
                initialValues={{ status: '全部状态' }}
                style={{ display: 'flex', justifyContent: 'space-between' }}
            >
                <Flex>
                    <Form.Item name='timerange' label='时间范围' rules={[{required:true}]} className={style.itemstyle}>
                        <RangePicker allowClear style={{ width: 305, height: 32, marginRight: 20 }} />
                    </Form.Item>
                    <Form.Item name='status' label='状态' rules={[{required:true}]} className={style.itemstyle}>
                        <Select
                            style={{ width: 200, height: 32 }}
                            allowClear
                            onChange={handleChange}
                            options={[
                                { value: '全部状态', label: '全部状态' },
                                { value: '正常', label: '正常' },
                                { value: '已注销', label: '已注销' },
                            ]}
                        />
                    </Form.Item>
                    <Button type="primary" onClick={()=>search()} style={{ width: 75, height: 32, borderRadius: 0, marginLeft: 10 }} icon={<SearchOutlined />}>
                        搜索
                    </Button>
                </Flex>
                <Flex>
                    <Button onClick={()=>print()} style={{ width: 75, height: 32, marginRight: 10, borderRadius: 0, color: '#0468ff', borderColor: '#0468ff' }} icon={<PrinterOutlined />}>打印</Button>
                    <Button onClick={()=>exports()} style={{ width: 75, height: 32, borderRadius: 0, color: '#0468ff', borderColor: '#0468ff' }} icon={<UploadOutlined />}>导出</Button>
                </Flex>
            </Form>
            <div ref={tableRef}>
                <Table<DataType> className={style.tabledata} columns={columns} pagination={false} dataSource={data} />
            </div>
            <Pagination style={{ marginTop: 20 }} showQuickJumper defaultCurrent={2} total={300} showTotal={(total) => `共 ${total} 条数据`} align="end" />
        </>
    );
}

export default Archivedetails;